<template lang="">
    <div class="myOrder">
        <el-table :data="tableData1" style="width: 100%"  :highlight-current-row="true" :lazy="true">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand" id="form">
                        <el-form-item label="商品名称:">
                            <span>{{ props.row.name }}</span>
                        </el-form-item>
                        <el-form-item label="出售方:">
                            <span>{{ props.row.shop }}</span>
                        </el-form-item>
                        <el-form-item label="商品ID:">
                            <span>{{ props.row.id }}</span>
                        </el-form-item>
                        <el-form-item label="出售方ID：">
                            <span>{{ props.row.shopId }}</span>
                        </el-form-item>
                        <el-form-item label="商品分类:">
                            <span>{{ props.row.category }}</span>
                        </el-form-item>
                        <el-form-item label="商品描述:">
                            <span>{{ props.row.desc }}</span>
                        </el-form-item>
                        <el-form-item label="商品预览:">
                            <!-- <span>{{ props.row.address }}</span> -->
                            <img style="width: 360px;height: 170px;padding: 10px;border-radius: 15px;" src="@/assets/images/posts/1.jpg" alt="">
                        </el-form-item>
                    
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="商品ID" prop="id">
            </el-table-column>
            <el-table-column label="商品名称" prop="name">
            </el-table-column>
            <el-table-column label="描述" prop="desc">
            </el-table-column>
            <el-table-column label="下单时间" prop="ordertime">
            </el-table-column>
            <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                    <div style="display: flex;flex-direction: row;justify-content:end">
                        <el-input v-model="searchForm.keyword" size="mini" placeholder="输入关键字搜索" />
                        <el-button style="margin-left: 10px;" size="mini" @click="search">搜索</el-button>
                    </div>
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="page">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="searchForm.currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="searchForm.pageSize"
                layout="sizes, prev, pager, next" :total="totalPage">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                totalPage: 40,
                currentPage: 1,
                searchForm:{
                    currentPage:1,
                    pageSize:5,
                    keyword:''
                },
                tableData1: [{
                    id: '12987122',
                    name: '好滋好味鸡蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷兰优质淡奶，奶香浓而不腻',
                    address: '上海市普陀区真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333',
                    ordertime:'2022-09-29'
                }, {
                    id: '12987123',
                    name: '好滋好味鸡蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷兰优质淡奶，奶香浓而不腻',
                    address: '上海市普陀区真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333',
                    ordertime:'2022-09-29'
                }, {
                    id: '12987125',
                    name: '好滋好味鸡蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷兰优质淡奶，奶香浓而不腻',
                    address: '上海市普陀区真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333',
                    ordertime:'2022-09-29'
                }, {
                    id: '12987126',
                    name: '好滋好味鸡蛋仔',
                    category: '江浙小吃、小吃零食',
                    desc: '荷兰优质淡奶，奶香浓而不腻',
                    address: '上海市普陀区真北路',
                    shop: '王小虎夫妻店',
                    shopId: '10333',
                    ordertime:'2022-09-29'
                }]
            }
        },
        activated() {
            console.log('我的订单组件keepAlive激活');
        },
        deactivated() {
            console.log('我的订单组件keepAlive注销');
        },
        methods: {
            search() {
                console.log(this.searchForm);
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            handleSizeChange(val) {
                this.searchForm.pageSize = val
            },
            handleCurrentChange(val) {
                this.searchForm.currentPage = val
            }
        },
    }
</script>
<style lang="less" scoped>
    @import url('./index.less');

    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>